import React, {
  Component,
  createRef,
  createContext,
  useRef,
  useState,
} from "react";
import PropType from "prop-types";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import gsap from "gsap"; //动画库
import Stats from "stats.js"; //性能监控
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js"; // FBX 模型加载器

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'; //EffectComposer 效果组合器 它是处理 WebGLRenderer 效果的 接收 renderer为参数
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'; // RenderPass 处理通道 它是处理 scene 场景和相机 camera 的。 接收 scene camera 为参数
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';//UnrealBloomPass 泛光通道

import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass'; // 高亮发光描边通道 OutlinePass(画布宽高二维向量，场景scene,相机camera)
// 1、后期处理，点击模型边框高亮 描边
// 2' 光线投射Raycaster 拾取
const scene = new THREE.Scene(); // 场景
const camera = new THREE.PerspectiveCamera(
  85,
  window.innerWidth / window.innerHeight,
  1,
  1200
); // 相机

const renderer = new THREE.WebGLRenderer({antialias:true}); //渲染器 antialias扛锯齿 默认为false
const controls = new OrbitControls(camera, renderer.domElement); // 轨道控制器


const axesHelper = new THREE.AxesHelper(5); // 辅助线
scene.add(axesHelper);



const raycaster = new THREE.Raycaster(); //光线投射Raycaster
window.addEventListener('click',function(event){
  let x=( event.clientX / window.innerWidth ) * 2 - 1;
  let y  = - ( event.clientY / window.innerHeight ) * 2 + 1;
  // 通过摄像机和鼠标位置更新射线
  raycaster.setFromCamera( new THREE.Vector2(x,y), camera );

  // 计算物体和射线的焦点
	const intersects = raycaster.intersectObjects( scene.children );
  if(intersects && intersects.length !==0){
    console.log('this is click ',intersects[0].object)

  }

})



const Home = () => {

  const texture = useRef(new THREE.TextureLoader()).current.load(
    "./logo512.png"
  );
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  const geometry = new THREE.BoxGeometry(1, 1, 0.2);
  const ambientLight = new THREE.AmbientLight(0xffffff);
  scene.add(ambientLight);
  const material = [
    new THREE.MeshLambertMaterial({ color: 4244200, opacity: 1 }),
    new THREE.MeshLambertMaterial({ color: 3500454, opacity: 1 }),
    new THREE.MeshLambertMaterial({ color: 3757225, opacity: 1 }),
    new THREE.MeshLambertMaterial({ color: 9145712, opacity: 1 }),
    new THREE.MeshLambertMaterial({
      color: "red",
      opacity: 1,
      transparent: false,
      map: texture,
    }), //transparent 属性为true 的时候，透明的背景就不显示出来了。
    new THREE.MeshLambertMaterial({ color: 3120771, opacity: 1 }),
  ];
  const cube = new THREE.Mesh(geometry, material); // 网格模型，需要几何体和材质
  scene.add(cube);

  const mapSprite = new THREE.TextureLoader().load("./光点.png") // 获取图片
  const spriteMaterial = new THREE.SpriteMaterial({map:mapSprite, color: 0x00ffff}) // 材质
  const sprite = new THREE.Sprite(spriteMaterial)
  sprite.scale.set(0.2,0.2,1)
  sprite.position.set(0,1,0)

  scene.add(sprite)

  camera.position.z = 5;

  const geometry1 = new THREE.BoxGeometry(1, 1, 1);
  const material1 = new THREE.MeshLambertMaterial({
      color: 0x009999,
  });
  const mesh = new THREE.Mesh(geometry1, material1);
  const mesh1 = new THREE.Mesh(geometry1, material1);
  mesh.position.set(2,0,0)
  scene.add(mesh)
  mesh1.position.set(2,2,0)
  scene.add(mesh1)

  // 1、创建后处理对象EffectComposer，WebGL渲染器作为参数
  const composer = new EffectComposer(renderer);
  // 2、创建一个渲染器通道，场景和相机作为参数
  const renderPass = new RenderPass(scene, camera);
  // 3、设置renderPass通道
  composer.addPass(renderPass);
  // 4、创建OutlinePass通道,显示模型外轮廓边框
  const v2 = new THREE.Vector2(window.innerWidth, window.innerWidth);
  // 5、outlinePass第一个参数v2的尺寸和canvas画布保持一致
  const outlinePass = new OutlinePass(v2, scene, camera);
  //高亮发光描边外观样式设置
  outlinePass.visibleEdgeColor.set(0xffff00); //模型描边颜色，默认白色 
  outlinePass.edgeThickness = 4; //高亮发光描边厚度
  outlinePass.edgeStrength = 6; //高亮描边发光强度
  outlinePass.pulsePeriod = 2; //模型闪烁频率控制，默认0不闪烁
  //6、设置需要高亮发光描边的模型对象
  outlinePass.selectedObjects = [cube];
  // 7、设置OutlinePass通道
  composer.addPass(outlinePass);

  // 精灵图闪烁效果
  let s = 0.0;
  let Smax = 0.2;
  const spriteAnimate=()=>{
    s += 0.01;
    if (s < 0.5) {
      sprite.scale.x = Smax * (1 + s);
      sprite.scale.y = Smax * (1 + s);
    } else if (s >= 0.5 && s < 1.0) {
      sprite.scale.x = Smax * (2 - s);
      sprite.scale.y = Smax * (2 - s);
    } else {
      s = 0.0;
    }
  }
 
  function animate() {
  
    requestAnimationFrame(animate);
    spriteAnimate() // 精灵图闪烁方法
    controls.update();
    // renderer.render(scene, camera); 使用发光通道之后，这个就不能在用了
    // 8、使用后处理模块EffectComposer，可通过该对象的render方法调用渲染器的render方法
    composer.render();
  }
  animate();
  return <div></div>;
};

export default Home;
